<template>
  <div class="main">

    <Header></Header>
    
    <div class="search">
      <div id="top"></div>
      <div id="content-wrap">
        <div id="content-1">
          <div>
            <div>店铺列表</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div>打印状态</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div>规格搜索</div>
            <div><el-input style="height: 120%" placeholder="未打印" /></div>
          </div>
          <div>
            <div>快递分区</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div id="content-2">
          <div>
            <div>快捷选单</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div>退款状态</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div>成团时间</div>
            <div>
              <el-date-picker
                v-model="clusterDate"
                type="date"
                placeholder="Pick a day"
                size="default"
                style="width: 100%"
              />
            </div>
          </div>
          <div>
            <div>地区选择</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div id="content-3">
          <div>
            <div>订单状态</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div>爆款模式</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div>
            <div>留言备注</div>
            <div><el-input style="height: 120%" placeholder="未打印" /></div>
          </div>
          <div>
            <div>快递选择</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div id="content-4">
          <div>
            <div>智能搜索</div>

            <div><el-input style="height: 120%" placeholder="未打印" /></div>
          </div>
          <div>
            <div>商品搜索</div>

            <div><el-input style="height: 120%" placeholder="未打印" /></div>
          </div>
          <div>
            <div>旗帜选择</div>
            <div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择店铺"
                size="default"
                style="width: 100%"
              >
                <el-option
                  v-for="item in shoplist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="select">
      <div>
        <div>
          <div>一键筛选</div>
          <div>管理</div>
        </div>
      </div>
    </div> -->
    <div class="operation">
      <div class="left">
        <el-select
          v-model="value"
          class="m-2"
          placeholder="快捷勾选"
          size="large"
          style="width: 8rem"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="middle">
        <div>+新增快递模板</div>
        <div>打印快递单</div>
        <div>打印发货单</div>
        <div>打印备货单</div>
        <div>一键发货</div>
      </div>
      <div class="right">
        <div>更多操作</div>
        <div>设置</div>
      </div>
    </div>
    <div class="detail">
      <div class="statistics">
        <div>
          共查询到 <span>{{pendingOrdersCount}}</span> 个 <span>待发货未打印订单</span>,共
          <span>{{ totalOrderCount}}</span> 个包裹
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" height="128" style="width: 100%;height: 100%;">
            <el-table-column prop="orderId" label="订单编号" />
            <el-table-column prop="courierId" label="快递员编号" />
          <el-table-column prop="orderInfo" label="订单信息" width="180" />
          <el-table-column prop="storeName" label="店铺名称" width="180" />
          <el-table-column prop="goodsInfo" label="商品信息" />
          <el-table-column prop="orderStatus" label="状态" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="action" label="操作" />
        </el-table>
      </div>
    </div>
    <div class="view">
      <div id="icon-details">
        <div>
          <div class="lefttop">
            <div><i class="iconfont order-num">&#xe605;</i></div>
            <div>
              <p>订单数</p>
              <span>543</span>
            </div>
          </div>
          <div class="righttop">
            <div><i class="iconfont object-num">&#xe676;</i></div>
            <div>
              <p>货物量</p>
              <span>1932</span>
            </div>
          </div>
        </div>
        <div>
          <div class="leftbottom">
            <div><i class="iconfont today-miles">&#xe71b;</i></div>
            <div>
              <p>今日里程</p>
              <span>1345</span>
            </div>
          </div>
          <div class="rightbottom">
            <div><i class="iconfont cycle-time">&#xe76a;</i></div>
            <div>
              <p>周转时间</p>
              <span>25h</span>
            </div>
          </div>
        </div>
      </div>
      <div id="bar" ref="barChart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,computed } from "vue";
import * as echarts from "echarts";
import { onMounted } from "vue";
import {logoUrl} from "@/common/common"
import Header from "@/components/Header.vue";
const value = ref<string>("");


let clusterDate = ref<string>("");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];
const shoplist = [
  {
    value: "京东",
    label: "JD",
  },
  {
    value: "顺丰",
    label: "SF",
  },
];
const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
function initBarChart() {
  myChart1.value = echarts.init(barChart.value!);
  var gradientColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#f2b266" }, // 渐变色起始颜色
    { offset: 1, color: "#f8f0df" }, // 渐变色结束颜色
  ]);
  myChart1.value.setOption({
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: ["运单"],
      orient: "horizontal",
      top: 10, // 调整top值以控制图例距离顶部的距离
    },
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    },
    yAxis: {},
    color: ["#c38bef"],
    series: [
      {
        name: "运单",
        type: "bar",
        data: [250, 300, 220, 410, 90, 170, 410],
        barWidth: 20,
        smooth: true,
        label: {
          show: true,
          position: "top",
        },
        itemStyle: {
          // 使用渐变色
          color: gradientColor,
        },
      },
    ],
  });
}
onMounted(() => {
  initBarChart();
});

const tableData = reactive([
  {
    orderId:1,
    courierId:1,
    orderInfo:'急速发货',
    storeName:'京东',
    goodsInfo:'易碎品，请注意',
    orderStatus:'待发货',
    remark:'今晚7:00前送达',
    price:'100',
    action:'推迟派单'
  }
]);

const pendingOrdersCount = computed(()=>{
    return tableData.filter(order=>order.orderStatus === '待发货').length
})

const totalOrderCount = computed(()=>{
    return tableData.length
})
</script>

<style scoped lang="less">
@font-face {
  font-family: "iconfont"; /* Project id 4410292 */
  src: url("//at.alicdn.com/t/c/font_4410292_0zyecv5mhjf.woff2?t=1707218588269")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4410292_0zyecv5mhjf.woff?t=1707218588269")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4410292_0zyecv5mhjf.ttf?t=1707218588269")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 3rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.iconfont.object-num {
  background: linear-gradient(to right, rgb(85, 62, 62) 20%, rgb(54, 200, 216) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.iconfont.today-miles {
  background: linear-gradient(to right, rgb(201, 158, 158) 20%, rgb(110, 110, 89) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.iconfont.cycle-time {
  background: linear-gradient(to right, rgb(82, 139, 245) 20%, yellow 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.iconfont.order-num {
  background: linear-gradient(to right, rgb(45, 160, 45) 20%, rgb(213, 213, 141) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.main {
  height: 100vh;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f3f4f8;
  .title {
    position: fixed;
    width: 100%;
    height: 2.3rem;
    display: flex;
    .logo {
      flex: 1;
      display: flex;
      .logo-img {
        width: 9%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        padding-left: 5rem;
        align-items: center;
        margin-top: 1vh;
        .imgi {
          height: 100%;
          border-radius: 50%;
        }
      }

      .logo-content {
        width: 20%;
        height: 90%;
        display: flex;
        flex-direction: column;
        margin-top: 1vh;

        .top-font {
          flex: 2;
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          span {
            font-size: 1rem;
            font-weight: 700;
          }
        }

        .bottom-font {
          flex: 1.4;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          span {
            font-size: 0.7rem;
            color: rgb(233, 211, 211);
          }
        }
      }
    }
  }
  .search {
    flex: 5;
    width: 99%;

    margin: 1px 0px 5px 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    #top {
      flex: 1;
    }
    #content-wrap {
      flex: 4;
      display: flex;
      justify-content: space-evenly;
      #content-1 {
        width: 20%;

        border-right: 0.5rem solid rgb(129, 102, 102);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        > div {
          height: 20%;

          display: flex;
          justify-content: space-evenly;
          align-items: center;
          > div:first-child {
            width: 20%;
            font-size: 0.9rem;
            font-weight: bold;
            display: flex;
            align-items: center;
          }
          > div:nth-child(2) {
            width: 70%;
            height: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            :deep(.el-select__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
            :deep(.el-input__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
          }
        }
      }
      #content-2 {
        width: 20%;

        border-right: 0.5rem solid rgb(129, 102, 102);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        > div {
          height: 20%;

          display: flex;
          justify-content: space-evenly;
          align-items: center;
          > div:first-child {
            width: 20%;
            font-size: 0.9rem;
            font-weight: bold;
            display: flex;
            align-items: center;
          }
          > div:nth-child(2) {
            width: 70%;
            height: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            :deep(.el-select__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
            :deep(.el-input__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
          }
        }
      }
      #content-3 {
        width: 20%;

        border-right: 0.5rem solid rgb(129, 102, 102);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        > div {
          height: 20%;

          display: flex;
          justify-content: space-evenly;
          align-items: center;
          > div:first-child {
            width: 20%;
            font-size: 0.9rem;
            font-weight: bold;
            display: flex;
            align-items: center;
          }
          > div:nth-child(2) {
            width: 70%;
            height: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            :deep(.el-select__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
            :deep(.el-input__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
          }
        }
      }
      #content-4 {
        width: 20%;

        border-right: 0.5rem solid rgb(129, 102, 102);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        > div {
          height: 20%;

          display: flex;
          justify-content: space-evenly;
          align-items: center;
          > div:first-child {
            width: 20%;
            font-size: 0.9rem;
            font-weight: bold;
            display: flex;
            align-items: center;
          }
          > div:nth-child(2) {
            width: 70%;
            height: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            :deep(.el-select__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
            :deep(.el-input__wrapper) {
              background-color: #f4f5f7 !important;
              border-radius: 0 !important;
            }
          }
        }
      }
    }
  }
  .select {
    flex: 1;
    background-color: #f3f4f8;
    display: flex;
    align-items: center;

    padding: 2px 2px 2px 2px;
    > div:first-child {
      width: 20%;
      background-color: white;
      height: 80%;
      margin: 1px 0px 5px 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      border-radius: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      > div:first-child {
        width: 60%;
        height: 80%;

        display: flex;
        justify-content: space-evenly;
        align-items: center;
        > div:first-child {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        > div:nth-child(2) {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0.7rem;
          border: 0.1rem solid #ffe95a;
        }
      }
    }
  }
  .operation {
    flex: 1.2;
    background-color: rgb(203, 217, 198);
    display: flex;
    margin: 1px 0px 5px 5px;
    box-shadow: 0 0 10px rgba(94, 80, 80, 0.3);
    border-radius: 0.3rem;
    width: 98%;
    .left {
      width: 10%;

      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middle {
      width: 60%;
      background-color: rgba(138, 185, 203, 0.3);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 10px;

      > div {
        width: 12%;
        height: 70%;
        border-radius: 1rem;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .right {
      width: 15%;

      display: flex;
      justify-content: space-evenly;
      align-items: center;
      > div {
        width: 40%;
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        background-color: white;
      }
      > div:hover {
        cursor: pointer;
      }
    }
  }
  .detail {
    flex: 3.5;

    display: flex;
    flex-direction: column;
    margin: 1px 0px 5px 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 0.3rem;
    width: 98%;
    .statistics {
      flex: 1;

      > div {
        font-size: 0.9rem;
        width: 50%;
        margin-left: 1rem;
        padding-top: 0.4rem;
        > span {
          color: #f2cfb0;
        }
      }
    }
    .table {
      flex: 4;
      background-color: rgb(54, 190, 36);
    }
  }
  .view {
    flex: 5;
    background-color: yellow;
    display: flex;

    #icon-details {
      flex: 1;
      background-color: #f3f4f8;
      display: flex;
      flex-direction: column;

      > div:first-child {
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .lefttop {
          height: 80%;
          width: 30%;

          display: flex;
          > div:first-child {
            flex: 1;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          > div:nth-child(2) {
            flex: 1;

            p {
              font-size: 0.8rem;
              color: #bababa;

              text-align: center;
            }
            span {
              font-weight: 600;
              font-size: 1.5rem;
              display: flex;
              justify-content: center;
            }
          }
        }
        .righttop {
          height: 80%;
          width: 30%;

          display: flex;
          > div:first-child {
            flex: 1;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          > div:nth-child(2) {
            flex: 1;
            p {
              font-size: 0.8rem;
              color: #bababa;

              text-align: center;
            }
            span {
              font-weight: 600;
              font-size: 1.5rem;
              display: flex;
              justify-content: center;
            }
          }
        }
      }

      > div:nth-child(2) {
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .leftbottom {
          width: 30%;
          height: 80%;

          display: flex;
          > div:first-child {
            flex: 1;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          > div:nth-child(2) {
            flex: 1;
            p {
              font-size: 0.8rem;
              color: #bababa;

              text-align: center;
            }
            span {
              font-weight: 600;
              font-size: 1.5rem;
              display: flex;
              justify-content: center;
            }
          }
        }
        .rightbottom {
          width: 30%;
          height: 80%;

          display: flex;
          > div:first-child {
            flex: 1;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          > div:nth-child(2) {
            flex: 1;
            p {
              font-size: 0.8rem;
              color: #bababa;

              text-align: center;
            }
            span {
              font-weight: 600;
              font-size: 1.5rem;
              display: flex;
              justify-content: center;
            }
          }
        }
      }
    }

    #bar {
      flex: 1;
    }
  }
}
</style>
